<template>
  <div class="container-fluid w-75 mx-auto pt-5">
    <h1 class="mb-4 text-center text-danger">任务列表案例</h1>
    <div class="row align-items-center">
      <!-- 全选 -->
      <div class="col-auto">
        <div class="form-check">
          <input
            class="form-check-input"
            type="checkbox"
            v-model="isAllChecked"
            id="allCheck"
          />
          <label class="form-check-label" for="allCheck"> 全选 </label>
        </div>
      </div>

      <!-- 输入待办 -->
      <div class="col">
        <input
          class="form-control"
          type="text"
          placeholder="请输入待办事项,按回车添加"
          aria-label="todo input"
          @keyup.enter="onAdd"
          v-model="inpValue"
        />
      </div>
    </div>

    <ul class="list-group mt-4">
      <!-- v-for  -->
      <li
        v-for="(item, index) in list"
        :key="item.id"
        class="list-group-item d-flex justify-content-between"
      >
        <div class="form-check d-inline-block">
          <input
            class="form-check-input"
            type="checkbox"
            :id="'flexCheckDefault' + index"
            v-model="item.done"
          />
          <!-- 是否完成的checkbox -->

          <!-- 动态class -->
          <label
            class="form-check-label"
            :class="{ 'text-decoration-line-through': item.done }"
            :for="'flexCheckDefault' + index"
            >{{ item.text }}</label
          >
        </div>

        <!-- 删除小按钮 -->
        <button class="btn-close" @click="onDelete(index)"></button>
      </li>
    </ul>

    <div class="d-flex mt-2 justify-content-between align-items-center">
      <span>剩余{{ unDoneList }}个</span>

      <ul class="nav nav-pills">
        <li class="nav-item">
          <button class="nav-link active">全部</button>
        </li>
        <li class="nav-item">
          <button class="nav-link">未完成</button>
        </li>
        <li class="nav-item">
          <button class="nav-link">已完成</button>
        </li>
      </ul>

      <button type="button" class="btn btn-danger" @click="onClear">
        清除已完成
      </button>
      <!-- <button
        type="button"
        class="btn btn-danger"
        @click="list = list.filter((v) => !v.done)"
      >
        清除已完成
      </button> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          text: "吃饭",
          done: true,
        },
        {
          id: 2,
          text: "睡觉",
          done: false,
        },
      ],

      // 双向绑定 v-model
      inpValue: "",
    };
  },
  methods: {
    // 提起回车键
    onAdd() {
      // push 数组的一个方法添加元素
      // js 日期对象 Date 方法 now Date.now() 返回 1970-1-1 0:0:0  到现在的毫秒数
      const obj = { id: Date.now(), text: this.inpValue, done: false };
      this.list.push(obj);
    },
    // 点击 清除已完成
    onClear() {
      // 实现过滤  留下 未完成的任务
      this.list = this.list.filter((v) => !v.done);
    },
    // 点击删除
    onDelete(num) {
      // 传入要删除掉元素的下标 .  删除几个
      this.list.splice(num, 1);
    },
  },
  // 计算属性  默认情况下  只读
  // 当前特点 可以被修改
  computed: {
    // 计算是否全选  只读
    // isAllChecked() {
    //   // every() 方法测试一个数组内的所有元素是否都能通过指定函数的测试.它返回一个布尔值
    //   // every 注意一个细节 后面讲到删除  补充
    //   return this.list.every((item) => item.done);
    //   // return this.list.every(function (item) {
    //   //   return item.done === true;
    //   // });
    // },
    // 计算是否全选 读写
    isAllChecked: {
      get() {
        // 如果空数组 调用 every - 直接返回true

        // 前端js 让同学不背 js类型 隐式转换
        //  0 false "" NaN undefined null  转成布尔 false
        // 其他 转成 true

        // return this.list.length && this.list.every((item) => item.done);

        if (this.list.length > 0) {
          return this.list.every((item) => item.done);
        } else {
          return false;
        }
      },
      set(v) {
        // console.log(v);  v 当前当前全选的状态 true
        // 把  true 设置到 list里面每一个 done属性中
        this.list.forEach((item) => (item.done = v));
      },
    },

    // 计算未完成个数
    unDoneList() {
      // return this.list.filter(item=>item.done===false)
      // ! 取反
      return this.list.filter((item) => !item.done).length;
    },
  },
};
</script>

<style></style>
